<template>
  <div class="header">
    <div class="left"><span class="iconfont back">&#xe658;</span></div>
    <router-link to="/search" class="input">
      <span class="iconfont search">&#xe63c;</span>
      输入城市/景点
    </router-link>
    <router-link to="/city" class="right">
      {{this.city.name}}<span class="iconfont show_more">&#xe65c;</span>

    </router-link>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'HomeHeader',
  computed: {
    ...mapState(['city'])
  }
}
</script>

<style lang="stylus" scoped>
  @import '~styles/varibles.styl';
  .header
    height $headerHeight
    display flex
    align-items center
    background $bgColor
    color #fff
    .left
      width .84rem
      .back
        display block
        font-size 0.6rem
        text-align center
    .right
      min-width 1.04rem
      padding 0 .1rem
      display flex
      justify-content center
      align-items center
      color #fff
      .show_more
        font-size .45rem
    .input
      flex 1
      padding 0 .12rem
      height .6rem
      line-height .6rem
      background #fff
      border-radius 4px
      color #ccc
      display flex;
      align-items center;
      .search
        font-size .4rem
        margin-right .1rem
</style>
